<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝搜索框布局</title>
    <link rel="stylesheet" href="vendor/font/iconfont.css">
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		body {
			font-size: 12px;
		}
		.search_container{
			padding: 20px 10px 0 10px;
			position: relative;
		}
		.search_tips  a {
			float: right;		
			color: #666;
			text-decoration: none;
			padding: 5px 15px 0 0;
			line-height: 18px;
		}
		.search_tips  a:hover {
			color: red;
		}
		.s_button {
			float: right;
			height: 45px;
			width: 122px;
			padding-right: 10px;
		}
		.s_button .btn_search {
			border: 0;
			height: 100%;
			width: 100%;
			background-color: #ff4200;
			color: #fff;
			font-size: 18px;
		}
		.s_button .btn_search:hover {
			background-color: #f52b00;
			cursor: pointer;
		}
		.s_common_pannel {
			height: 39px;
			background-color: #f50;
			padding: 3px 0 3px 77px;
			overflow: hidden;
		}
		.s_common_pannel input {
			font-size: 18px;
			width: 100%;
			height: 39px;
			line-height: 39px;
			border: 0;
			background-color: #fff;
			outline: 0;
			padding-left: 3px;
		}
		
		.iconfont {
			font-family:"iconfont" !important;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
		    font-size:16px;
		    font-style:normal;
		    position: absolute;
		    top: 35px;
		    left: 93px;
		    color: #ccc;
		}
		.s_tab {
			position: absolute;
			top: 23px;
			left: 12px;
			width: 75px;
			height: 39px;
			text-align: center;
			overflow: hidden;
			background-color: #fff;
			cursor: pointer;
			border-left: 1px solid #f6f6f6;
			border-right: 1px solid #E5e5e5;
		}
		.s_tab ul {
			list-style: none;
			display: block;
		}
		.s_tab ul li {
			height: 39px;
			line-height: 39px;
		}
		.s_tab ul li:hover {
			background-color: #f6f6f6; 
		}
		.s_tab ul li a {
			color: #6e6e6e;
			text-decoration: none;
		}
		
		.s_tab ul li .selected {
			background-color: #f6f6f6;
			display: block;
		}
		.trigger_hover {
			height: auto;
		}

	</style>
	<script type="text/javascript" src="vendor/jquery-3.1.0.js"></script>
	<script type="text/javascript">
		$(window).on('load', function(event) {
			// 当输入框为空时，显示；否则，隐藏
			$(".s_text").on('input', function(event) {
				if($(".s_text").val()){
					$(".iconfont").hide();
				}else{
					$(".iconfont").show();
				}
			});
			$(".s_tab").on("mouseover", function(){
				$(".s_tab").addClass('trigger_hover');
			});
			$(".s_tab").on("mouseout", function(){
				$(".s_tab").removeClass('trigger_hover');
			});
			$("#tab_1").on('click', function(event) {
				$("#tab-id").removeClass('trigger_hover');
				if(this.className.indexOf('selected') < 0){
	 				$(this).addClass('selected')
				}
				$("#tab_2").removeClass('selected')
			});
			$("#tab_2").on('click', function(event) {
				$("#tab-id").removeClass('trigger_hover');
				if(this.className.indexOf('selected') < 0){
	 				$(this).addClass('selected')
				}
				$("#tab_1").removeClass('selected')	
			});
		});	
	</script>
</head>
<body>
	 <div class="search_container">
	 	<div id="tab-id" class="s_tab">
	 		<ul>
	 			<li id="tab_1" class="selected"><a href="#">宝贝</a></li>
	 			<li id="tab_2"><a href="#">店铺</a></li>
	 		</ul>
	 	</div>
	 	<div class="s_pannel">
	 		<form id="s_form">
	 			<div class="search_tips">
	 				<a href="#">高级<br>搜索</a>
	 			</div>
	 			<div class="s_button">
	 				<button class="btn_search">搜索</button>
	 			</div>
	 			<div class="s_common_pannel">
	 				<input type="text" class="s_text" x-webkit-speech="">
	 				<i class="iconfont">&#xe600;</i>
	 			</div>
	 		</form>
	 	</div>
	 </div>
</body>
</html>